<template>
    <div class="app_container">
      <el-card class="box-card">
        <div slot="header">
          <ul class="content">
            <li>
              <div style="max-width:200px" @click="jump('/order/recharge')"><i class="el-icon-money"></i></div>
              <p style="max-width:200px" @click="jump('/order/recharge')">今日充值</p>
              <el-tag style="max-width:200px;margin-bottom:5px;" type="success" @click="jump('/order/recharge')" >已支付：{{paid}}元</el-tag>
              <el-tag style="max-width:200px;margin-bottom:5px;" type="info" @click="jump('/order/recharge')" >待支付：{{unpaid}}元</el-tag>
            </li>
            <li>
              <div style="max-width:200px" @click="jump('/order/withdraw')"><i class="el-icon-postcard"></i></div>
              <p style="max-width:200px" @click="jump('/order/withdraw')">今日提现</p>
              <span v-for="(item,index) in user_withdraw_data" :key="'提现'+index" >
                <el-tag v-if="item.status === 1" style="max-width:200px;margin-bottom:5px;" type="primary" @click="jump('/order/withdraw')" >待审核：{{item.money}}元</el-tag>
                <el-tag v-if="item.status === 2" style="max-width:200px;margin-bottom:5px;" type="success" @click="jump('/order/withdraw')" >已通过：{{item.money}}元</el-tag>
                <el-tag v-if="item.status === 3" style="max-width:200px;margin-bottom:5px;" type="danger" @click="jump('/order/withdraw')" >已拒绝：{{item.money}}元</el-tag>
              </span>
            </li>
            <li>
              <div style="max-width:200px" @click="jump('/room/room')"><i class="el-icon-house"></i></div>
              <p style="max-width:200px" @click="jump('/room/room')">公开房间数</p>
              <el-tag style="max-width:200px;margin-bottom:5px;" type="success"  @click="jump('/room/room')">{{user_room_total}}</el-tag>
            </li>
            <li>
              <div style="max-width:200px" @click="jump('/member/listUsers')"><i class="el-icon-user"></i></div>
              <p style="max-width:200px" @click="jump('/member/listUsers')">APP用户</p>
              <el-tag style="max-width:200px;margin-bottom:5px;" type="primary" @click="jump('/member/listUsers')" >今日注册{{register_user_total}}人</el-tag>
              <el-tag style="max-width:200px;margin-bottom:5px;" type="success" @click="jump('/member/listUsers')" >当前在线{{online_user_total}}人</el-tag>
            </li>
          </ul>
        </div>
        <div class="item">
          <h3>今日用户充值统计</h3>
          <el-table v-loading="listLoading" ref="dataList" :data="menuList" style="width:100%;margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
              <el-table-column prop="type" label="充值渠道">
                <template slot-scope="scope">
                  <p v-if="scope.row.type === 1">支付宝</p>
                  <p v-if="scope.row.type === 2">微信</p>
                  <p v-if="scope.row.type === 3">苹果内购</p>
                  <p v-if="scope.row.type === 4">h5支付宝</p>
                  <p v-if="scope.row.type === 5">h5微信</p>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="充值金额" > </el-table-column>
              <el-table-column prop="count" label="充值比数" > </el-table-column>
              <el-table-column prop="status" label="状态" >
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.status === 1" type="primary">待支付</el-tag>
                  <el-tag v-if="scope.row.status === 2" type="success">已支付</el-tag>
                </template>
              </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
</template>

<script>
import {listData} from '@/api/dashboard/index'
export default {
  data(){
    return {
      listLoading:false,
      paid:undefined,
      unpaid:undefined,
      user_withdraw_data:undefined,
      user_room_total:undefined,
      register_user_total:undefined,
      online_user_total:undefined,
      menuList:[],
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      this.listLoading =true
      listData().then(response => {
        this.paid = response.data.paid
        this.unpaid = response.data.unpaid
        this.user_withdraw_data = response.data.user_withdraw_data
        this.user_room_total = response.data.user_room_total
        this.register_user_total = response.data.register_user_total
        this.online_user_total = response.data.online_user_total
        this.menuList = response.data.user_recharge_data
        this.listLoading = false
      })
    },
    jump(path){
      this.$router.push({path:path})
    }
  }
}
</script>

<style scoped>
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    border: 1px solid #EBEEF5;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .content li {
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    /* border-right: 1px solid #EBEEF5; */
  }

  /* .content li:nth-child(4){
    border: none;
  } */

  .content li div {
    width: 48px;
    height: 48px;
    background: #eeeeee;
    font-size: 30px;
    text-align: center;
    line-height: 48px;
    border-radius: 50%;
    cursor: pointer;
  }
  .content li p {
    cursor: pointer;
  }

  .content li .el-tag {
    cursor: pointer;
  }

  .content li div:hover {
    background: #f5f5f5;
  }
</style>
